<template>
  <div class="dashboard-container">
    <el-card style="margin-bottom: 30px;">
      <el-row>
        <el-col :span="3">
          <el-avatar :size="100" :src="userinfo.staffPhoto" />
        </el-col>
        <el-col :span="21">
          <div class="user">
            <div> 早安，{{ userName }}，祝你开心每一天！</div>
            <span>{{ userName }} | {{ userinfo.company }}-{{ userinfo.departmentName }}</span>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-row :gutter="20">
      <el-col :span="13">
        <el-card>
          <div slot="header" class="clearfix">
            工作日历
          </div>
          <el-row type="flex" justify="end">
            <el-select v-model="year" placeholder="请选择" style="width: 120px; margin-right: 10px;" @change="dateChange()">
              <el-option
                v-for="item in yearsList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-select v-model="moth" placeholder="请选择" style="width: 120px;" @change="dateChange()">
              <el-option
                v-for="item in 12"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-row>
          <el-calendar v-model="value">
            <template slot="dateCell" slot-scope="{ date, data }">
              <div class="date-content">
                <span class="text">{{ getDay(date) }}</span>
                <span v-if="isWeek(date,data)" class="rest">休</span>
              </div>
            </template>
          </el-calendar>
        </el-card>
      </el-col>
      <el-col :span="11">
        <el-card>
          <div slot="header" class="clearfix">
            绩效指标
          </div>
          <div id="main" style="height: 500px;" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import { mapGetters, mapState } from 'vuex'
import * as echarts from 'echarts/core'
import { RadarChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent
} from 'echarts/components'
import { LabelLayout, UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  RadarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  LegendComponent
])
export default {
  name: 'Dashboard',
  data() {
    return {
      value: new Date(),
      year: new Date().getFullYear(),
      moth: new Date().getMonth() + 1,
      yearsList: []

    }
  },
  computed: {
    ...mapGetters(['userName']),
    ...mapState('user', ['userinfo'])

  },
  created() {
    this.initSelectYear()
  },
  mounted() {
    var myChart = echarts.init(document.getElementById('main'))
    myChart.setOption({

      title: {
        text: '基础雷达图'
      },

      radar: {
        // shape: 'circle',
        indicator: [
          { name: 'Sales', max: 6500 },
          { name: 'Administration', max: 16000 },
          { name: 'Information Technology', max: 30000 },
          { name: 'Customer Support', max: 38000 },
          { name: 'Development', max: 52000 },
          { name: 'Marketing', max: 25000 }
        ]
      },
      series: [
        {
          name: 'Budget vs spending',
          type: 'radar',
          data: [
            {
              value: [4200, 3000, 20000, 35000, 50000, 18000],
              name: 'Allocated Budget'
            },
            {
              value: [5000, 14000, 28000, 26000, 42000, 21000],
              name: 'Actual Spending'
            }
          ]
        }
      ]

    })
  },
  methods: {
    getDay(date) {
      return date.getDate()
    },
    isWeek(date, data) {
      return date.getDay() === 6 || date.getDay() === 0
    },
    initSelectYear() {
      for (let i = 0; i < 30; i++) {
        this.yearsList.push({ value: (this.year - i), label: (this.year - i) + '年' })
      }
      for (let i = 1; i < 10; i++) {
        this.yearsList.unshift({ value: (this.year + i), label: (this.year + i) + '年' })
      }
    },
    dateChange() {
      console.log(this.moth)
      this.value = new Date(`${this.year}-${this.moth}  `)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.user{
  margin-top: 20px;
  div{
    font-size: 24px;
    margin-bottom: 10px;
  }
  span{
    color:#999;
    font-size: 20px;
  }
}
::v-deep .el-calendar-day {
  height:  auto;
 }
::v-deep .el-calendar-table__row td::v-deep .el-calendar-table tr td:first-child, ::v-deep .el-calendar-table__row td.prev{
  border:none;
 }
.date-content {
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
}
.date-content .rest {
  color: #fff;
  border-radius: 50%;
  background: rgb(250, 124, 77);
  width: 20px;
  height: 20px;
  line-height: 20px;
  display: inline-block;
  font-size: 12px;
  margin-left: 10px;
}
.date-content .text{
  width: 20px;
  height: 20px;
  line-height: 20px;
 display: inline-block;

}
::v-deep .el-calendar-table td.is-selected .text{
   background: #409eff;
   color: #fff;
   border-radius: 50%;
 }
::v-deep .el-calendar__header {
   display: none
 }
.clearfix{
  font-size: 24px;
}
</style>
